<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的话题</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link th:href="@{/animate.min.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/common.js}"></script>

    <style>

        a {
            cursor: pointer;
        }

        .line {
            border-bottom: 2px solid #eee;
            margin-bottom: 5px;
            height: 2%;
        }

        #addTopicBtn {
            transition: 400ms;
            width: 70px;
            height: 70px;
            background-color: #fff;
            border: none;
            box-shadow: 0 0 10px #adadad;
            border-radius: 50%;
            position: fixed;
            right: 4%;
            bottom: 8%;
        }

        #addTopicBtn:hover {
            transition: 700ms;
            width: 72px;
            height: 72px;
            cursor: pointer;
            box-shadow: 0 0 15px #adadad;

        }

    </style>

</head>
<body style="background-color: #F8F8F8;overflow-x: hidden">
<div>

    <!--    顶部导航-->
    <div class="layui-header" style="background-color: black;">
        <ul class="layui-nav layui-layout-left" style="background-color: black">
            <li class="layui-nav-item"><a
                    onclick="window.location.href='/user/index?loginName='+ getQueryVariable('loginName')">首页</a></li>
            <li class="layui-nav-item layui-this"><a
                    onclick="window.location.href='/user/myTopic?loginName='+ getQueryVariable('loginName')">我的话题</a>
            </li>
            <li class="layui-nav-item"><a
                    onclick="window.location.href='/user/followedTopic?loginName='+ getQueryVariable('loginName')">关注话题</a>
            </li>
            <li class="layui-nav-item"><a
                    onclick="window.location.href='/user/info?loginName='+ getQueryVariable('loginName')">个人中心</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right" style="background-color: black">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <span><text th:text="${param.loginName}"></text></span>
                </a>
            </li>
            <li class="layui-nav-item"><a th:href="@{/userController/logout}">退出</a></li>
        </ul>
    </div>

    <!--日期选择器-->
    <div style="padding: 20px;position: relative;left: 100px">
        <input type="text" readonly style="text-align: center;cursor: pointer;border-radius:
                      7px" id="timePicker" placeholder="查询发布时间">
    </div>


    <!--    内容-->
    <div id="topicsArea" style="position: center">

    </div>

    <!--    底部-->
    <div style="padding: 20px;text-align: center;font-size: 15px;color: #A4A4A4">
        再怎么刷新也没有啦
    </div>

    <!--发布按钮-->
    <div>
        <button style="outline: none" type="button" id="addTopicBtn"
                onclick="addTopic()"
                class="btn btn-primary">
            <span style="text-align: center;font-size: 60px"><strong>+</strong></span>
        </button>
    </div>

</div>


<script th:src="@{/layui/jquery-1.11.2.js}"></script>
<script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>
<script>
    $(function () {
        layui.use(['element', 'form', 'table', 'layer', 'laydate'], function () {
            var element = layui.element;
            var form = layui.form;
            var table = layui.table;
            var layer = layui.layer;
            var laydate = layui.laydate;

            let current = new Date();


            laydate.render({
                elem: '#timePicker',
                max: current.getFullYear() + "-" + current.getDate() + "-" + current.getDay(),
                done: function (value, date, endDate) {
                    console.log(value); //得到日期生成的值，如：2017-08-18
                    loadMyTopics(layer, value);
                }
            });


            loadMyTopics(layer, "");

        });
    });

    function addTopic() {
        let loginName = getQueryVariable("loginName");
        window.location.href = '/user/addTopic?loginName=' + loginName + '&type=create';
    }


    function loadMyTopics(layer, date) {
        let topicsArea = $("#topicsArea");
        topicsArea.empty();
        $.get("/topicController/loadMyTopics", {date: date, loginName: getQueryVariable("loginName")}, function (resp) {
            if (resp.code == 0) {
                $.each(resp.data, function (index, topic) {
                    let id = topic.id;
                    let title = topic.title;
                    let content = topic.content;
                    let createTime = topic.createTime;
                    let updateTime = topic.updateTime;
                    let creatorLoginName = topic.creatorLoginName;
                    let updaterLoginName = topic.updaterLoginName;
                    let tagName = topic.tagName;
                    let state = topic.state;
                    let creatorOrUpdater = updaterLoginName == null ? creatorLoginName + ' 发布于 ' + createTime
                        : creatorLoginName + ' 发布于 ' + createTime + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
                        updaterLoginName + ' 更新于 ' + updateTime;

                    let topicDivParent = $("<div class='animated fadeIn' style='display: flex;justify-content: center;padding: 5px;' >");
                    let topicDiv = $("<div style='width: 80%;height: 100%;background-color: #fff;border: solid #E0E0E0 1px;border-radius: 15px;box-shadow:0 0 10px #E0E0E0;padding:10px' >");

                    //标题
                    topicDiv.append("<div style=\"display: flex;padding: 10px;align-items: center;height: 5%\" >" +
                        " <div style='width: 85%;'>" +
                        "                        <span style='font-size: 18px;margin-right: 10px'>" + title + "</span>" +
                        "                        <span class=\"layui-badge layui-bg-black\" style='position: relative;bottom:3px'>"
                        + tagName + "</span>" +
                        "                    </div>" +
                        "                    <div style='text-align: right;width:15%'>" +
                        "                        <select style='font-size: 15px;color: #A4A4A4;border-radius: 7px' id='s" + id
                        + "' onchange='operateTopic($(this).attr(\"id\").substring(1),\"changeState\",$(this).val())'>" +
                        "                            <option value='0'>待解决</option>" +
                        "                            <option value='1'>已解决</option>" +
                        "                        </select>" +
                        "                    </div>" +
                        "</div>" +
                        "<div class=\"line\"></div>");

                    //正文
                    topicDiv.append("<div style=\"height: 75%;padding: 10px\">" +
                        "                    <div>" +
                        "                        <span style=\"font-size: 15px\">" + content + "</span>" +
                        "                    </div>" +
                        "                </div>");

                    //底部
                    topicDiv.append("<div style=\"display: flex;padding: 10px;height:5% \">" +
                        "                    <div style=\"width: 85%;position: relative;top: 8px; \">" +
                        "                        <span style=\"font-size: 13px;color: #A4A4A4\">" + creatorOrUpdater + "</span>" +
                        "                    </div>" +
                        "                    <div id='" + id + "' style=\"text-align: right;width:15%;position: relative;top: 8px; \">" +
                        "                        <button type=\"button\" onclick='window.location.href=\"/user/topicDetail?loginName=" + getQueryVariable("loginName") + "&id=" + id + "\"' style=\"cursor: pointer;font-size: 14px;background-color: #fff;color:" +
                        "                        #A4A4A4;border:none;padding-right: 6px\" onclick='operateTopic($(this).parent().attr(\"id\"),\"detail\")'>详情</button>" +
                        "                        <button type=\"button\" style=\"cursor: pointer;font-size: 14px;background-color: #fff;color:" +
                        "                        #000;border:none;padding-right: 6px\" onclick='operateTopic($(this).parent().attr(\"id\"),\"modify\")'>修改</button>" +
                        "                        <button type=\"button\" style=\"cursor: pointer;font-size: 14px;background-color: #fff;color:" +
                        "                        red;border:none;\" onclick='operateTopic($(this).parent().attr(\"id\"),\"delete\")'>删除</button>" +
                        "                    </div>" +
                        "                </div>");

                    topicDivParent.append(topicDiv);
                    topicsArea.append(topicDivParent);

                    $("#s" + id + " option[value='" + state + "']").attr("selected", "selected");

                });


            } else {
                layer.msg(resp.msg);
            }
        }, "json")
    }

    //话题操作公用方法
    //type: detail 详情,modify 修改,delete 删除,changeState 更改状态
    //stateVal 更改状态时使用 状态值
    function operateTopic(id, type, stateVal) {
        if (type == 'detail') {
            $.get('/topicController/detailTopic', {id: id}, function (resp) {
                layer.msg(resp.msg);
            })
        }
        if (type == 'modify') {
            window.location.href = '/user/addTopic?type=modify&id=' + id + '&loginName=' + getQueryVariable('loginName');
        }
        if (type == 'changeState') {
            $.get('/topicController/changeState', {id: id, state: stateVal}, function (resp) {
                layer.msg(resp.msg);
                setTimeout(() => run(), 1800);

                async function run() {
                    await setTimeout;
                    window.location.reload();
                }
            })
        }
        if (type == 'delete') {
            layer.confirm('确认删除？', {
                btn: ['确认', '取消'],
                yes: function () {
                    $.get('/topicController/deleteTopic', {id: id}, function (resp) {
                        layer.msg(resp.msg);
                    });
                    setTimeout(() => run(), 1800);

                    async function run() {
                        await setTimeout;
                        window.location.reload();
                    }
                }
            })
        }

    }

</script>
</body>
</html>